<script setup lang="ts">
import Taro from "@tarojs/taro";
import { cva } from "class-variance-authority";
import { watch } from "vue";

const { position = "center" } = defineProps<{
  position?: "center" | "bottom";
  clickMaskClose?: boolean;
}>();

const vars = cva("absolute", {
  variants: {
    position: {
      center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
      bottom: "w-screen bottom-0 left-0",
    },
  },
});

const visible = defineModel<boolean>();
const handleClickMask = () => (visible.value = false);

watch(visible, flag => {
  // @ts-expect-error
  Taro.setPageStyle({
    style: {
      overflow: flag ? 'hidden' : 'auto'
    }
  });
})
</script>

<template>
  <view v-if="visible"
        class="fixed top-0 left-0 w-screen h-screen bg-black/50 z-20"
        :catchtouchmove="true"
        @tap.stop.prevent="handleClickMask">
    <view :class="vars({ position })" @tap.stop.prevent>
      <slot />
    </view>
  </view>
</template>
